<template>
  <div class="state-title">
    <div class="unlogin">
      <span>动态</span>
      <van-icon name="records" />
    </div>
  </div>
  <div class="login" v-if="stateSwitch">
    <div>你还未登录</div>
    <span>登录账号,查看你关注的UP主内容</span>
    <button @click="goLogin">登录</button>
  </div>
  <div v-else>
    <div style="padding: 1rem;text-align: center;font-size: 0.5rem;">你暂时还未关注up主</div>
    <div style="margin: 0rem 0.2rem 0 ;display: flex;flex-direction: column;align-items: center;">
      <span style="margin: 0 0.3rem 0.4rem;color:#ff279aec;display: inline-block;">AI一键生图</span>
      <van-cell-group inset style="margin-bottom: 0.2rem;background-color: #ccc;border: 1px solid #ff279aec;color: #ff279aec;">
        <van-field v-model="text" label="描述词" placeholder="请输入描述词" show-word-limit maxlength="1000" rows="4" type="textarea" />
      </van-cell-group>
      <div style="display: flex;justify-content: center;margin-top: 0.1rem;">
        <button style="display: inline-block;border: 1px solid #ff279aec;width: 7rem;height: 1rem;border-radius: 1rem;color: #fff;font-size: 0.4rem;background-color: #ff279aec;" @click="generate" :disabled="pending">一键生成</button>
      </div>
      <div style="border:1px solid #ff279aec;width: 7rem;height: 4rem;margin-top: 0.5rem;">
        <img :src="img" alt="" style="width: 100%;height: 100%;" v-if="img.length">
      </div>
      <a :href="img" :download="text + '.png'" style="margin-top: 0.2rem;color: #ff279aec;border-bottom: 2px solid #ff279aec;font-size: 0.35rem;">&nbsp;&nbsp;一键下载图片&nbsp;&nbsp;</a>
    </div>
  </div>
</template>

<script setup>
import {computed,ref} from 'vue'
import { useRouter } from 'vue-router';
import { showFailToast } from 'vant'



const stateSwitch = computed(() =>{
  if(window.localStorage.getItem('token')?.length >0){
    return false
  }
  else{
    return true
  }
})
const router = useRouter()
const goLogin = () =>{
  router.push('/login')
}
const text = ref()
const name = ref()


const img = ref('')
const pending = ref(false)

const generate = () =>{
  console.log('一次点击');
  pending.value = true
var data = `{\"task\":\"txt2img.sd\",\"params\":{\"model\":\"anime\",\"text\":\"${text.value}\",\"w\":512,\"h\":512,\"guidance_scale\":14,\"negative_prompt\":\"cropped, blurred, mutated, error, lowres, blurry, low quality, username, signature, watermark, text, nsfw, missing limb, fused hand, missing hand, extra limbs, malformed limbs, bad hands, extra fingers, fused fingers, missing fingers, bad breasts, deformed, mutilated, morbid, bad anatomy\",\"sampler\":\"k_euler\",\"seed\":-1,\"num_steps\":25},\"model\":\"anime\",\"text\":\"{{{ masterpiece }}}, exquisite facial features, masterpiece, perfect facial features, exquisite details, eyes, hair atmosphere, high resolution, 4K image quality, best light, delicate skin, detailed light, masterpiece, best quality,higher quality,high details, human head and deer body, sagittata, beautiful female face, long eyelashes, long silver hair, several braids, crystal bow and arrow, crystal translucent deer horn, corolla, silvery white fur wraps the whole body, no meat, crystal forest, magic, circle, masterpiece, masterpiece, ultra-high definition, countless golden light spots, dream charm, human personification, colorful light and shadow, top light, realistic effect, grade safety, unity, (ultra-fine CG:1.2),(8K:1.2), indoor, {{{{{wind blowing}}}}}}}}}} light, {{{}}}}}} {{{{{{{{{{{{{{{{{{{{{{{, 4k\",\"w\":512,\"h\":512,\"guidance_scale\":14,\"negative_prompt\":\"cropped, blurred, mutated, error, lowres, blurry, low quality, username, signature, watermark, text, nsfw, missing limb, fused hand, missing hand, extra limbs, malformed limbs, bad hands, extra fingers, fused fingers, missing fingers, bad breasts, deformed, mutilated, morbid, bad anatomy\",\"sampler\":\"k_euler\",\"seed\":1072366942,\"num_steps\":25,\"notify_url\":\"\"}`

var xhr = new XMLHttpRequest();
xhr.withCredentials = false;

xhr.addEventListener("readystatechange", function () {
    if (this.readyState === 4) {
      console.log(this.responseText,'xxx');
      let res = JSON.parse(this.responseText);
      if(res.msg === 'success') {
        find(res.data.uid)
      }
      else{
        showFailToast(res.msg_zh)
        pending.value = false
      }
    }
});

xhr.open("POST", "https://23329.o.apispace.com/aigc/txt2img");
xhr.setRequestHeader("X-APISpace-Token","v0d1a4abzpwdzjpq03vlvdw1p2ctw1xj	");
xhr.setRequestHeader("Content-Type","application/json");

xhr.send(data);
}

const find = (uid) =>{
  var data = `{\"uid\":\"${uid}\"}`
  var xhr = new XMLHttpRequest();
  xhr.withCredentials = false;
  xhr.addEventListener("readystatechange", function () {
      if (this.readyState === 4) {
          console.log(this.responseText);
          let res = JSON.parse(this.responseText);
          if(res.data.status === 'working'){
            find(uid)
          }
          else if(res.data.status === 'pending'){
            pending.value = false

            showFailToast(res.msg_zh)
          }
          else{
            pending.value = false
            img.value = res.data.cdn
          }
      }
  });
  xhr.open("POST", "https://23329.o.apispace.com/aigc/query-image");
  xhr.setRequestHeader("X-APISpace-Token","v0d1a4abzpwdzjpq03vlvdw1p2ctw1xj	");
  xhr.setRequestHeader("Content-Type","application/json");

  xhr.send(data);
}

</script>

<style lang="less" scoped>
.state-title{
  height: 1.4rem;
  background: #ff279aec;
  padding-top: 0.4rem;
  color:#fff;
  font-size: 0.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  .unlogin{
    .van-icon{
      position: absolute;
      right: 0.1rem;
    }
  }
}
.login{
  height: 6rem;
  border-bottom: 1px solid #ccc;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  div{
    font-size: 0.4rem;
    font-weight:bold;
  }
  span{
    font-size: 0.3rem;
    color: #ccc;
    margin: 0.3rem 0;
  }
  button{
    width: 6rem;
    height: 1rem;
    background: #fd079f;
    font-size: 0.4rem;
    color: #fff;
    border: transparent;
    border-radius: 0.1rem;
  }
}
</style>